<script setup lang="ts">
import {ref, reactive, onMounted} from "vue";
import * as G6 from '@antv/g6';

onMounted(() => {
  init()
})

const mountNode = ref(null);


const init = () => {
  const data = {
    nodes: [
      {id: 'node1', x: 100, y: 200, label: 'Node 1'},
      {id: 'node2', x: 300, y: 200, label: 'Node 2'},
    ],
    edges: [
      {source: 'node1', target: 'node2'},
    ],
  };

  const graph = new G6.Graph({
    container: mountNode.value,
    width: 600,
    height: 400,
    modes: {
      default: ['drag-canvas', 'zoom-canvas', 'click-select'],
    },
    layout: {
      type: 'random',
    },
    defaultNode: {
      size: 30,
    },
    // 节点不同状态下的样式集合
    nodeStateStyles: {
      // 鼠标 hover 上节点，即 hover 状态为 true 时的样式
      hover: {
        fill: 'lightsteelblue',
      },
      // 鼠标点击节点，即 click 状态为 true 时的样式
      click: {
        stroke: '#000',
        lineWidth: 3,
      },
    },
    // 边不同状态下的样式集合
    edgeStateStyles: {
      // 鼠标点击边，即 click 状态为 true 时的样式
      click: {
        stroke: 'steelblue',
      },
    },
  });

  graph.setData(data);
  graph.render();
}
</script>

<template>
  <div>
    <div id="mountNode" ref="mountNode"></div>
  </div>
</template>

<style scoped>
#mountNode {
  width: 800px;
  height: 500px;
}
</style>
